<link href="<?php echo $this->baseUrl(); ?>/ext/signup/css/style.css" type="text/css" rel="stylesheet">
<script src="<?php echo $this->baseUrl(); ?>/ext/signup/js/jquery.inputfocus-0.9.min.js" type="text/javascript"></script>

<div id="container" style="height:400px;">
    <form method="post">
        <h1><?php echo $this->translate('account_login_title'); ?></h1>
        <div class="form" style="margin-top:0px">
            <input type="text" value="email" name="account_login_email" id="account_login_email" />
            <label for="account_login_email"><?php echo $this->translate('account_login_email_desc'); ?></label>

            <input type="password" value="password" name="account_login_password" id="account_login_password" />
            <label for="account_login_password"><?php echo $this->translate('account_login_password_desc'); ?></label>

            <input type="text" value="" name="account_login_capcha" id="account_login_capcha" />
            <label for="account_login_capcha"><?php echo $this->translate('account_login_capcha_desc'); ?></label>

            <div id="captcha_text" style="float: left; width: 100%; font-size: 10px;">
            <?php
                echo $this->captcha->render($this);
            ?>
            </div>
            <input type="hidden" name="security_token" value="<?php echo $this->security_token; ?>" />
        </div>
        <div class="clear"></div>
        <input class="submit-blank" type="submit" value="<?php echo $this->translate('account_login_submit'); ?>" />
        <div class="clear"></div>
    </form>

    <div id="account_login_ajax_loader" style="display:none;text-align:center;padding-top:40px;">
        <img src="<?php echo $this->baseUrl(); ?>/images/ajax-loader.gif" />
        <br />
        <br />
        <?php echo $this->translate('account_login_progress'); ?>
    </div>
    <div id="account_login_success_block" style="display:none;text-align:center;padding-top:40px;">
        <?php echo $this->translate('account_login_success_message'); ?>
    </div>
    <div id="account_login_fail_block" style="display:none;text-align:center;">
        <?php echo $this->translate('account_login_fail_message'); ?>
    </div>
</div>

<br />
<br />

<script type="text/javascript">
$(function(){
    $('input[name=account_login_email]').inputfocus({ value: 'email' });
    $('input[name=account_login_password]').inputfocus({ value: 'password' });

    $('div#container form input[type=submit]').click(function() {

        var $form = $('div#container form');
        $('#account_login_fail_block').hide();

        var password = $form.find('input[name=account_login_password]').val();
        var email    = $form.find('input[name=account_login_email]').val();
        var stoken   = $form.find('input[name=security_token]').val();
        var captcha  = $form.find('input[name=account_login_capcha]').val();

        $form.find('input[name=account_login_email]').removeClass('error');
        $form.find('input[name=account_login_password]').removeClass('error');
        $form.find('input[name=account_login_capcha]').removeClass('error');

        var def = false;

        if (email == 'email' || email == '') {
            $form.find('input[name=account_login_email]').addClass('error').effect("shake", { times:3 }, 50);
            def = true;
        }

        if (password == 'password' || password == '') {
            $form.find('input[name=account_login_password]').addClass('error').effect("shake", { times:3 }, 50);
            def = true;
        }

        if (captcha == '') {
            $form.find('input[name=account_login_capcha]').addClass('error').effect("shake", { times:3 }, 50);
            def = true;
        }

        if (!def) {
            $form.hide();
            $('#account_login_ajax_loader').show();

            $.post(window.location.href, {
                access_login    : email,
                access_token    : stoken,
                access_password : password,
                captcha         : captcha
            }, function(response) {
                $('#account_login_ajax_loader').hide();
                if (response == '1') {
                    $('#account_login_success_block').show();
                    window.location = window.location.href;
                } else {
                    var $form = $('div#container form');

                    var json = false;
                    try {
                        json = eval('(' + response + ')');
                    } catch (e) {}

                    if (json) {
                        if (json.token) {
                            $form.find('input[name=security_token]').val(json.token);
                        }
                        if (json.captcha_html) {
                            $form.find('div[id=captcha_text]').html(json.captcha_html);
                        }
                    }

                    $form.show();
                    $form.find('input[name=account_login_email]').addClass('error').effect("shake", { times:3 }, 50);
                    $form.find('input[name=account_login_password]').addClass('error').effect("shake", { times:3 }, 50);
                    $form.find('input[name=account_login_capcha]').addClass('error').effect("shake", { times:3 }, 50);
                    $('#account_login_fail_block').show();
                }
            });
        }

        return false;
    });
});
</script>